<template>
  <div class="user">
    <el-row class="topw">
      <el-col :span="24">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>收费管理</el-breadcrumb-item>
          <el-breadcrumb-item>缴费查询</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row style="padding:10px 0">
      <el-col :span="24">
        <template>
          <el-select v-model="value" placeholder="请选择" style="width: 110px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              >
            </el-option>
          </el-select>
        </template>
        <!-- 给组件绑定原生事件的话，需要一个.native的修饰符 -->
        <el-input placeholder="请输入内容" class="search-input" v-model="enterpriseName" @keydown.native.enter="initList">
          <el-button slot="append" icon="el-icon-search" @click="initList"></el-button>
        </el-input>
        <el-button type="success" plain @click="Exportall()">导出缴费信息</el-button>
        <el-button type="success" plain @click="addDialogFormVisible=true" style="float: right;margin-right: 0px">导入缴费信息</el-button>
      </el-col>
    </el-row>
    <el-table class="margin-20" v-loading="loading" :data="PayList" border style="width: 100%">
      <el-table-column type="index" width="50">
      </el-table-column>
      <el-table-column prop="enterpriseName" label="企业名称" width="180">
      </el-table-column>
      <el-table-column prop="electricity" label="用电度数">
      </el-table-column>
      <el-table-column prop="payableElectricity" label="当期电费">
      </el-table-column>
      <el-table-column prop="water" label="用水度数">
      </el-table-column>
      <el-table-column prop="payableWater" label="当期水费">
      </el-table-column>
      <el-table-column prop="dateUpdate" label="创建时间" width="160">
      </el-table-column>
      <el-table-column  label="缴费状态" width="100">
          <template slot-scope="scope">
              {{ scope.row.status === 0 ?  '未缴': '' }}
              {{ scope.row.status === 1 ?  '已缴': '' }}
          </template>
      </el-table-column>
      <el-table-column label="操作" width="125">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" plain icon="el-icon-edit" @click="showEditDialog(scope.row)">
          </el-button>
          <!-- <el-button size="mini" type="danger" plain icon="el-icon-delete" @click="showDeleteDialog(scope.row)">
          </el-button> -->
          <el-button size="mini" type="warning" plain icon="el-icon-check" @click="showGrantDialog(scope.row)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="1"
        :page-sizes="[10, 20, 30, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <!-- 添加用户对话框 -->
    <el-dialog title="导入缴费信息" :visible.sync="addDialogFormVisible" width="500px">
      <el-form :model="addForm" label-width="120px" :rules="rules" ref="addUserForm">
        <el-form-item label="上传文档:" >
          <el-upload
            class="avatar-uploader"
            action="https://leather.ztazy.cn:3031/lookup/details/excel" 
            :show-file-list="false"
            name="file"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <el-button slot="trigger">选取文件</el-button>
             <div style="color:#4F94CD;display:inline-block;cursor:pointer" v-if="imageUrl" slot="tip" @click="myClick">{{addForm.name}}</div>
             <div  style="display:inline-block" v-else slot="tip"></div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="addDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUserSubmit('addUserForm')">确 定</el-button> -->
      </div>
    </el-dialog>
    <!-- 编辑用户对话框 -->
    <el-dialog title="录入水电费" :visible.sync="editDialogFormVisible">
      <el-form :model="editForm" label-width="80px" :rules="rules" ref="editUserForm">
        <el-form-item label="企业名称" prop="enterpriseName">
          <el-input v-model="editForm.enterpriseName" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="用电度数" prop="electricity">
          <el-input v-model="editForm.electricity" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="当期电费" prop="payableElectricity">
          <el-input v-model="editForm.payableElectricity" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="用水度数" prop="water">
          <el-input v-model="editForm.water" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="当期水费" prop="payableWater">
          <el-input v-model="editForm.payableWater" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserSubmit('editUserForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    PayList,
    editPay,
    PayAble,
    historyPayAble,
    BASEURL,
    addPay
  } from '@/api'
  export default {
    data() {
      return {
        options: [{
          value: '1',
          label: '未缴'
        }, {
          value: '2',
          label: '历史缴费'
        }],
        imageUrl: '',
        value: '1',
        PayList: [],
        enterpriseName:"",
        query: '',
        total: 0,
        pagesize: 10,
        pagenum: 1,
        addDialogFormVisible:false,
        addDialogFormVisible: false,
        addForm: {
          file1 :'',
          name:''
        },
        editDialogFormVisible: false,
        editForm: {
          enterpriseName: '',
          electricity: '',
          payableElectricity: '',
          water: '',
          payableWater: '',
          id: '',
        },
        grantDialogFormVisible: false,
        grantForm: {},
        roleList: [],
        roleId: '',
        // 添加用户的表单验证
        rules: {
          username: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
        }
      }
    },
    created() {
      this.initList()
    },
    computed: {
    },
    methods: {
      myClick(){
        console.log(123)
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pagesize = val
        this.initList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.pagenum = val
        this.initList()
      },
      Exportall(){
        window.open( `${BASEURL}lookup/details/excel/water/electricityAll`)
      },
      handleAvatarSuccess(res, file) {
        console.log(res)
        console.log(file)
        if (res.status === 0) {
                this.$message({
                  type: 'success',
                  message: '导入成功'
                })
                this.addDialogFormVisible = false
                this.initList()
                this.addForm.name = ""
              } else {
                this.$message({
                  type: 'warning',
                  message: res.meta.msg
                })
              }
              
        this.imageUrl = URL.createObjectURL(file.raw);
        // this.addForm.file1 = res.data.targetName
        console.log(this.addForm.file1)

        // console.log(this.addForm.targetName)
      },
      beforeAvatarUpload(file) {
        console.log(file)
        this.addForm.name  = file.name
        // const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        // if (!isJPG) {
        //   this.$message.error('上传头像图片只能是 JPG 格式!');
        // }
        if (!isLt2M) {
          this.$message.error('上传头像文件大小不能超过 2MB!');
        }
        return isLt2M;
      },
      initList() {
        console.log(this.value)
        if(this.value==2){
          console.log(123)
          this.loading = true
          historyPayAble({
            params: {
              enterpriseName:this.enterpriseName,
              page: this.pagenum-1,
              size : this.pagesize,
            }
          }).then(res => {
            console.log(res)
            
            this.PayList = res.data.content
            this.total = res.data.totalElements
            this.loading = false
          })
        }else{
          this.loading = true
          PayList({
            params: {
              enterpriseName:this.enterpriseName,
              page: this.pagenum-1,
              size : this.pagesize,
              sortField: 'update_time',
              sortType:'dsc'
            }
          }).then(res => {
            console.log(res.data.content)
            this.PayList = res.data.content
            this.total = res.data.totalElements
            this.loading = false
          })
        }
        
      },
      // 改变用户状态
      changeUserState(row) {
        console.log(row)
        changeUserState({
          uid: row.id,
          type: row.mg_state
        }).then(res => {
          if (res.meta.status === 200) {
            this.$message({
              type: 'success',
              message: '修改用户状态成功'
            })
          } else {
            this.$message({
              type: 'warning',
              message: res.meta.msg
            })
          }
        })
      },
      closeDiaglog(){
        this.$refs['addUserForm'].resetFields()
      },
      
      // 显示编辑用户对话框
      showEditDialog(row) {
        console.log(row)
        this.editDialogFormVisible = true
        
        // getUserById(row.id).then(res => {
        //   if (res.meta.status === 200) {
            this.editForm.enterpriseName = row.enterpriseName
            this.editForm.electricity = row.electricity
            this.editForm.payableElectricity = row.payableElectricity
            this.editForm.water = row.water
            this.editForm.payableWater = row.payableWater
            this.editForm.id= row.id
        //   }
        // })
      },
      // addUserSubmit(formName){
      //   this.$refs[formName].validate(valide => {
      //     if (valide) {
      //       console.log(this.addForm)
      //       addPay(this.addForm).then(res => {
      //         console.log(res)
      //         if (res.status === 0) {
      //           this.$message({
      //             type: 'success',
      //             message: '导入成功'
      //           })
      //           this.addDialogFormVisible = false
                
      //         } else {
      //           this.$message({
      //             type: 'warning',
      //             message: res.meta.msg
      //           })
      //         }
      //         this.initList()
      //       })
      //     }
      //   })
      // },
      // 编辑用户提交
      editUserSubmit(formName) {
        this.$refs[formName].validate(valide => {
          if (valide) {
            console.log(this.editForm)
            editPay(this.editForm).then(res => {
              console.log(res)
              if (res.status === 0) {
                this.$message({
                  type: 'success',
                  message: '编辑成功'
                })
                this.editDialogFormVisible = false
                this.initList()
              } else {
                this.$message({
                  type: 'warning',
                  message: res.meta.msg
                })
              }
            })
          }
        })
      },
      // 提交费用确认
      showGrantDialog(row) {
        console.log(row)
        this.$confirm('是否交完水电费?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 执行删除用户操作
          PayAble({
          params: {
            id:row.id,
            enterpriseInformationId: row.enterpriseInformationId
          }
        }).then(res => {
          console.log(res)
            if (res.status === 0) {
              this.$message({
                type: 'success',
                message: '缴费成功!'
              })
              this.initList()
            } else {
              this.$message({
                type: 'warning',
                message: res.meta.msg
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      // 显示分配角色对话框
      // showGrantDialog(row) {
      //   this.grantForm = row
      //   this.grantDialogFormVisible = true
      //   getRoleList().then(res => {
      //     console.log(res)
      //     if (res.meta.status === 200) {
      //       this.roleList = res.data
      //     }
      //   })
      // },
      // 分配角色
      // grantUserSubmit() {
      //   if (!this.roleId) {
      //     this.$message({
      //       type: 'warning',
      //       message: '角色不能为空，请选择！'
      //     })
      //   } else {
      //     grantUserRole({
      //       id: this.grantForm.id,
      //       rid: this.roleId
      //     }).then(res => {
      //       if (res.meta.status === 200) {
      //         this.$message({
      //           type: 'success',
      //           message: '设置角色成功'
      //         })
      //         this.grantDialogFormVisible = false
      //       } else {
      //         this.$message({
      //           type: 'error',
      //           message: res.meta.msg
      //         })
      //       }
      //     })
      //   }
      // }
    }
  }

</script>
<style lang="scss" scoped>
  .user {
    .margin-20 {
      margin: 20px 0;
    }

    .search-input {
      width: 250px;
    }

    .page {
      padding: 5px 0;
      background-color: #D3DCE6;
    }
  }

</style>
